<template>
  <div class="start-tab">
    <div v-for="(item, index) in dataList" :key="index" >
      <div v-if="item.list.length!==0" style="margin:10px">
        <p>{{item.firstSecond}}</p>
            <div class="tab" v-for="(item1, index) in item.list" :key="index"  @click="startDispaly(item1.title)">
      <img :src="item1.imgPath" alt="" />
      <span>{{ item1.title }}</span>
    </div>
      </div>
     
    </div>
    <!-- <div class="tab"  @click="startDispaly(item.title)">
      <img :src="item.imgPath" alt="" />
      <span>{{ item.title }}</span>
    </div> -->
  </div>
</template>

<script>
import bus from "../assets/js/eventBus";

export default {
  name: "startTab",
  props: {
    list: {
      type: Array,
      require: true,
    }
  },
  components: {},
  data() {
    return {
      dataList:[]
    };
  },
  methods: {
  getFirstSecond(){
      this.dataList = [
        {
          firstSecond: 'A',
          list: []
        },
        {
          firstSecond: 'B',
          list: []
        },
        {
          firstSecond: 'C',
          list: []
        },
        {
          firstSecond: 'D',
          list: []
        },
        {
          firstSecond: 'E',
          list: []
        },
        {
          firstSecond: 'F',
          list: []
        },
        {
          firstSecond: 'G',
          list: []
        },
        {
          firstSecond: 'H',
          list: []
        },
        {
          firstSecond: 'I',
          list: []
        },
        {
          firstSecond: 'J',
          list: []
        },
        {
          firstSecond: 'K',
          list: []
        },
        {
          firstSecond: 'L',
          list: []
        },
        {
          firstSecond: 'M',
          list: []
        },
        {
          firstSecond: 'N',
          list: []
        },
        {
          firstSecond: 'O',
          list: []
        },
        {
          firstSecond: 'P',
          list: []
        },
        {
          firstSecond: 'Q',
          list: []
        },
        {
          firstSecond: 'R',
          list: []
        },
        {
          firstSecond: 'S',
          list: []
        },
        {
          firstSecond: 'T',
          list: []
        },
        {
          firstSecond: 'U',
          list: []
        },
        {
          firstSecond: 'V',
          list: []
        },
        {
          firstSecond: 'W',
          list: []
        },
        {
          firstSecond: 'X',
          list: []
        },
        {
          firstSecond: 'Y',
          list: []
        },
        {
          firstSecond: 'Z',
          list: []
        }
      ]
      this.list.forEach(item=>{
        this.dataList.forEach(item1=>{
          if (item.firstSecond === item1.firstSecond) {
          item1.list.push(item)
        }
        })
      })
    console.log('1', this.dataList);
  },
    
    startDispaly(title) {
      let msg = {
         title,
        display: true,
        isActive: true,
      };
      bus.$emit("displayChang", msg);
      bus.$emit("taskbarList", title);
      this.$emit("startTabDisplay", false);
    },
  },
  mounted() {
    this.getFirstSecond()
  },
};
</script>

<style scoped>
p{
  font-size: 20px;
  font-weight: 600;
}
.start-tab{
    width: 100%;
}
.tab {
  width: calc(100% - 10px);
  height: 50px;
  display: flex;
  align-items: center;
}

.tab img {
  width: 20px;
}

.tab span {
  font-size: 12px;
  padding-left: 10px;
  height: 50px;
  line-height: 50px;
}

.tab:hover {
  background-color: #e3ebef;
}
</style>
